<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>武汉大学校园3D地图</title>
    <style type="text/css">
      html,
      body,
      #container {
        height: 100%;
        width: 100%;
        margin: 0;
      }
      #map {
        height: 100%;
        width: 100%;
      }
      #reset {
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 1;
        transform: scale(1); /* 设置按钮放大倍数 */
        border: none; /* 去掉按钮的边框 */
        padding: 0; /* 去掉按钮的内边距 */
        outline: none; /* 去掉按钮的聚焦状态边框 */
        background-color: transparent; /* 设置按钮背景透明 */
      }
      #scenery {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 1;
      }
      #select {
        position: absolute;
        top: 30px;
        left: 10px;
        z-index: 1;
      }
      #selection {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 1;
      }
      #header {
        font-size: 32px;
        font-weight: bold;
        position: absolute;
        top: 15px;
        left: 50%;
        transform: translate(-50%, -50%); /* 居中对齐 */
        z-index: 9;
        /* 渐变色 */
        background: linear-gradient(
          to right,
          #ff0000,
          #a9c21c,
          #12dc52
        ); /* 设置文字颜色为彩色渐变 */
        -webkit-background-clip: text; /* Webkit浏览器的背景裁剪，实现彩色文字效果 */
        -webkit-text-fill-color: transparent; /* Webkit浏览器的文字填充颜色，设为透明以显示背景渐变 */
      }
      /* select美化 */
      .shortselect {
        background: #fafdfe;
        height: 28px;
        width: 135px;
        line-height: 28px;
        border: 1px solid #9bc0dd;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        text-align: center;
      }

      /* 跳转按钮美化 */
      .circle {
        margin-top: 16px;
        background-color: #f4f1f1;
        color: rgb(5, 5, 5);
        position: relative;
        z-index: 1;
        overflow: hidden;
        border: 1px solid #9bc0dd;
      }

      .circle::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 50%;
        left: 50%;
        width: 1rem;
        height: 1rem;
        transform: translate3d(-50%, -50%, 0) scale(0, 0);
        border-radius: 50%;
        background-color: #a6eeac;
        transform-origin: center;
        transition: ease-in-out 0.5s;
      }

      .circle:hover::before {
        transform: translate3d(-50%, -50%, 0) scale(15, 15);
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="map"></div>
      <button id="reset"><img src="定位.png" /></button>
      <div id="header">
        <a href="https://130.whu.edu.cn/">武汉大学130周年校庆</a>
      </div>
      <button id="select" class="circle">查询</button>
      <select id="selection" class="shortselect">
        <option value="">--请选择地图类型--</option>
        <option value="bus.html">校巴图</option>
        <option value="map.html">景点图</option>
        <option value="canteen.html">食堂图</option>
      </select>
    </div>

    <script>
      //实现选择地图类型跳转
      // 获取下拉选择和按钮的元素
      var selection = document.getElementById("selection");
      var goButton = document.getElementById("select");

      // 添加按钮点击事件监听器
      goButton.addEventListener("click", function () {
        // 获取选择的选项值
        var selectedOption = selection.value;

        // 跳转到选定的页面
        window.location.href = selectedOption;
      });
    </script>

    // 高德API调用,标签引入了高德地图的 JavaScript
    API其中包含版本号、API密钥以及所需的插件
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=9b551938141cdc8b263341f780dccbcc&plugin=AMap.Geocoder,AMap.DistrictSearch,AMap.MouseTool,AMap.OverView,AMap.Scale"></script>
    <script>
      // 初始化地图对象
      var map = new AMap.Map("map", {
        center: [114.364477, 30.534181],
        zoom: 17,
        pitch: 60,
        viewMode: "3D",
        expandZoomRange: true,
        zooms: [3, 20],
      });

      //添加缩放按钮
      AMap.plugin(["AMap.ControlBar"], function () {
        // 添加 3D 罗盘控制
        map.addControl(new AMap.ControlBar());
      });

      // 设置地图语言
      map.setLang("zh_cn");

      //校园巴士站点
      var marker_lyem = new AMap.Marker({
        position: [114.358402, 30.526729],
        strokeColor: "red",
        title: "珞瑜二门",
        label: {
          content: "珞瑜二门",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      var marker_xxxbyj = new AMap.Marker({
        position: [114.360666, 30.526743],
        title: "信息学部一教",
        label: {
          content: "信息学部一教",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      var marker_xxxbtsg = new AMap.Marker({
        position: [114.360639, 30.529798],
        title: "信息学部图书馆",
        label: {
          content: "信息学部图书馆",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      var marker_ljm = new AMap.Marker({
        position: [114.359008, 30.533891],
        title: "珞珈门",
        label: {
          content: "珞珈门",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      var marker_wlxbwj = new AMap.Marker({
        position: [114.360569, 30.536257],
        title: "文理学部五教",
        label: {
          content: "文理学部五教",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      var marker_lyh = new AMap.Marker({
        position: [114.362929, 30.537361],
        title: "落英湖",
        label: {
          content: "落英湖",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      var marker_mkszyxy = new AMap.Marker({
        position: [114.367301, 30.537851],
        title: "马克思主义学院",
        label: {
          content: "马克思主义学院",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      var marker_fysss = new AMap.Marker({
        position: [114.369576, 30.536761],
        title: "枫园十四舍",
        label: {
          content: "枫园十四舍",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      var marker_fyss = new AMap.Marker({
        position: [114.372634, 30.53707],
        title: "枫园四舍",
        label: {
          content: "枫园四舍",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      var marker_fxy = new AMap.Marker({
        position: [114.371743, 30.539196],
        title: "法学院",
        label: {
          content: "法学院",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      var marker_hbst = new AMap.Marker({
        position: [114.370767, 30.541275],
        title: "湖滨食堂",
        label: {
          content: "湖滨食堂",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      var marker_xwxy = new AMap.Marker({
        position: [114.367854, 30.540425],
        title: "新闻学院",
        label: {
          content: "新闻学院",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      var marker_cssjxy = new AMap.Marker({
        position: [114.364013, 30.541875],
        title: "城市设计学院",
        label: {
          content: "城市设计学院",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      var marker_dczx = new AMap.Marker({
        position: [114.361492, 30.541769],
        title: "大创中心",
        label: {
          content: "大创中心",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      var marker_tyst = new AMap.Marker({
        position: [114.358482, 30.541603],
        title: "田园食堂",
        label: {
          content: "田园食堂",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      var marker_fyst = new AMap.Marker({
        position: [114.358622, 30.538387],
        title: "桂园食堂",
        label: {
          content: "桂园食堂",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      var marker_xxxbsls = new AMap.Marker({
        position: [114.35786, 30.52873],
        title: "信息学部十六舍",
        label: {
          content: "信息学部十六舍",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });
      //校园巴士路线
      var path = [
        new AMap.LngLat(114.358402, 30.526729),
        new AMap.LngLat(114.360666, 30.526743),
        new AMap.LngLat(114.360639, 30.529798),
        new AMap.LngLat(114.359453, 30.529811),
        new AMap.LngLat(114.358262, 30.529511),
        new AMap.LngLat(114.357766, 30.530329),
        new AMap.LngLat(114.357404, 30.531193),
        new AMap.LngLat(114.357764, 30.53251),
        new AMap.LngLat(114.359094, 30.533466),
        new AMap.LngLat(114.359008, 30.533891),
        new AMap.LngLat(114.359813, 30.53452),
        new AMap.LngLat(114.360569, 30.536257),
        new AMap.LngLat(114.362506, 30.537629),
        new AMap.LngLat(114.362929, 30.537361),
        new AMap.LngLat(114.364077, 30.537038),
        new AMap.LngLat(114.367301, 30.537851),
        new AMap.LngLat(114.36736, 30.536627),
        new AMap.LngLat(114.36846, 30.53646),
        new AMap.LngLat(114.369576, 30.536761),
        new AMap.LngLat(114.372634, 30.53707),
        new AMap.LngLat(114.372226, 30.539149),
        new AMap.LngLat(114.371743, 30.539196),
        new AMap.LngLat(114.370767, 30.541275),
        new AMap.LngLat(114.369506, 30.541399),
        new AMap.LngLat(114.367854, 30.540425),
        new AMap.LngLat(114.364775, 30.541164),
        new AMap.LngLat(114.364088, 30.54115),
        new AMap.LngLat(114.364013, 30.541875),
        new AMap.LngLat(114.361492, 30.541769),
        new AMap.LngLat(114.358482, 30.541603),
        new AMap.LngLat(114.357951, 30.541589),
        new AMap.LngLat(114.357645, 30.540919),
        new AMap.LngLat(114.357771, 30.539945),
        new AMap.LngLat(114.358622, 30.538387),
        new AMap.LngLat(114.359198, 30.537537),
        new AMap.LngLat(114.360163, 30.536683),
        new AMap.LngLat(114.360582, 30.536526),
        new AMap.LngLat(114.360416, 30.536295),
        new AMap.LngLat(114.359697, 30.534599),
        new AMap.LngLat(114.359008, 30.533891),
        new AMap.LngLat(114.359094, 30.533466),
        new AMap.LngLat(114.357764, 30.53251),
        new AMap.LngLat(114.357404, 30.531193),
        new AMap.LngLat(114.357766, 30.530329),
        new AMap.LngLat(114.357766, 30.529465),
        new AMap.LngLat(114.35786, 30.52873),
        new AMap.LngLat(114.357921, 30.526748),
        new AMap.LngLat(114.358402, 30.526729),
      ];
      var polyline = new AMap.Polyline({
        path: path,
        borderWeight: 1.5, // 线条宽度，默认为 1
        strokeColor: "green", // 线条颜色
        lineJoin: "round", // 折线拐点连接处样式
      });
      map.add(polyline); // 将折线添加至地图实例

      // 添加重新定位按钮
      var resetBtn = document.getElementById("reset");
      resetBtn.onclick = function () {
        map.setCenter([114.364477, 30.534181]);
        map.setZoom(17);
        map.setPitch(60);
      };
    </script>
  </body>
</html>
